<template>
	<view class="content">
		<u-sticky>
			<view style="background-color: #fff;padding:0 20rpx;">
				<u-search placeholder="药品名\对应症" v-model="keyWord" @search="init" @custom="init"></u-search>
			</view>
		</u-sticky>

		<view style="padding:0 20rpx;">

			<view class="item-box" :index="index" v-for="(item, index) in list" :key="item.id"
				@click="navigateTo('/pages/medicine/edit?id='+item.id)">
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="item_title">
					{{item.name}}
				</view>
				<u-row>
					<u-col span="5">
						<view class="demo-layout bg-purple">库存：{{item.stock}}包/颗</view>
					</u-col>
					<u-col span="7">
						<view class="demo-layout bg-purple-light">
							有效期：{{$u.timeFormat(item.expirationDate, 'yyyy年mm月dd日')}}</view>
					</u-col>
					<u-col span="12">
						<view class="demo-layout bg-purple-light">
							功能主治：{{item.reverso || '--'}}</view>
					</u-col>
				</u-row>

			</view>

		</view>

		<uni-load-more :status="status"></uni-load-more>
		<cc-suspensionMenu :scrollShow="scrollShow" colors="#014AF8" :iconList="iconList"
			@click="menuClick"></cc-suspensionMenu>
		<!-- <view class="add" @click="navigateTo('/pages/medicine/edit')">+</view> -->

	</view>
</template>

<script>
	import * as medicine from '@/api/medicine'
	import * as auth from '@/api/auth'
	export default {
		data() {
			return {
				keyWord: '',
				pageNum: 1,
				pageSize: 10,
				total: '',
				status: '',
				list: [],
				scrollShow: false, //是否显示悬浮菜单

				iconList: [{
						name: '添加',
						icon: require('../../static/icon/new.png'),
					},
					{
						name: '退出',
						icon: require('../../static/icon/out.png'),
						
					}
				]
			}
		},
		onShow() {
			this.init()
		},
		// 上拉加载
		onReachBottom() {
			if (this.pageNum) {
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			menuClick(item) {
				if(item.name == '添加') {
					this.navigateTo('/pages/medicine/edit')
				}
				if(item.name == '退出') {
					auth.logout().then(res=>{
						uni.clearStorageSync();
						this.reLaunch('/pages/login/login')
						uni.showToast({
							icon: 'none',
							title: '退出成功',
							duration: 2000
						});
					})
				}
			},
			init() {
				this.total = ''
				this.list = []
				this.pageNum = 1
				this.getList()
			},
			// 获取新闻
			getList() {
				medicine.page({
					"page": this.pageNum,
					"size": this.pageSize,
					"sort": "desc",
					"order": "createTime",
					'keyWord': this.keyWord
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.pagination.total) {
						res.data.list.forEach(item => {
							item['show'] = false
						})
						this.list = this.list.concat(res.data.list || [])
						this.pageNum = this.list.length < res.data.pagination.total ? this.pageNum + 1 : 0
						if (this.pageNum === 0) {
							this.status = 'noMore'
						}
					} else {
						this.status = 'none'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.add {
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #fff;
		font-size: 24px;
		font-weight: 600;
		line-height: 96rpx;
		text-align: center;
		background-color: #014AF8;
	}

	.item-box {
		border-radius: 20rpx;
		padding: 14rpx 6rpx;
		border: 1rpx solid #d3d3;
		margin-top: 20rpx;
	}

	.item_title {
		font-weight: bold;
		padding-bottom: 6rpx;
		padding-left: 6rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
	}
</style>